<template>
    <el-container class="">
 <el-header height="120px" class="header">
     <div id="logo"></div>
            <!-- <div class="_admin">
                <div class="avatar cursor-pointer">
                    <el-dropdown>
                        <el-avatar alt="Avatar" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="viewOrder()">查看订单</el-dropdown-item>
                            <el-dropdown-item @click="viewLog()">查看日志</el-dropdown-item>
                            <el-dropdown-item @click="editAccount()">编辑信息</el-dropdown-item>
                            <el-dropdown-item @click="quit()">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <div class="_view">
                <div class="avatar cursor-pointer">
                    <el-dropdown>
                        <div>
                            <app-icon icon="ant-design:eye-outlined" style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                        </div>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="viewCategory()">category</el-dropdown-item>
                            <el-dropdown-item @click="viewProduct()">product</el-dropdown-item>
                            <el-dropdown-item @click="viewItem()">item</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div> -->
                <ul class="icons">
                    <li class="item">
                        <div class="avatar cursor-pointer">
                    <el-dropdown>
                        <el-avatar alt="Avatar" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="viewOrder()">查看订单</el-dropdown-item>
                            <el-dropdown-item @click="viewLog()">查看日志</el-dropdown-item>
                            <el-dropdown-item @click="editAccount()">编辑信息</el-dropdown-item>
                            <el-dropdown-item @click="quit()">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                    </li>
                    <li class="item">
                        <div class="avatar cursor-pointer">
                    <el-dropdown>
                        <div>
                            <app-icon icon="ant-design:eye-outlined" style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                        </div>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="viewCategory()">category</el-dropdown-item>
                            <el-dropdown-item @click="viewProduct()">product</el-dropdown-item>
                            <el-dropdown-item @click="viewItem()">item</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                    </li>
                    <li class="item" @click="viewCart()">
                        <app-icon icon="bi:cart-fill" style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                    </li>
                    <li class="item" @click="viewData()">
                        <app-icon icon="wpf:statistics"  style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                    </li>
                    <li class="item" @click="searchProducts()">
                        <app-icon icon="bi:search"  style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                    </li>
                </ul>
                <!-- <div class="funBtn1 cursor-pointer" @click="viewCart()">
                    <app-icon icon="bi:cart-fill" style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                </div>
                <div class="funBtn2 cursor-pointer" @click="viewData()">
                    <app-icon icon="wpf:statistics"  style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                </div>
                <div class="funBtn2 cursor-pointer" @click="searchProducts()">
                    <app-icon icon="bi:search"  style="font-size: 40px;color: grey; " data-flip="horizontal" class="icon"/>
                </div> -->
            </el-header>
    <el-container class="container">
                <div class="main">
                    <router-view v-slot="{ Component, route }">
                        <transition name="move" mode="out-in">
                            <keep-alive>
                                <div :key="route.name">
                                <component :is="Component" />
                                </div>
                            </keep-alive>
                        </transition>
                    </router-view>
                </div>
        </el-container>
        <el-footer class="bottom"></el-footer>
    </el-container>
</template>
<style lang="postcss" scoped>
.content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
._content{
    max-height: 77%;
}
.main {
    height: calc(100vh - 100px);
    overflow: auto;
    width: 100%;
    border: 1px solid rgb(216, 213, 213);
    border-radius: 8px;
}
#logo{
    @apply h-[80px] w-[300px];
     background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/logo.png");
}

.icons {
    display: flex;
    margin-left: auto;

}
.item {
    padding: 1em;
}
.container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.aside{
    @apply h-full bg-gray-200 overflow-hidden
}

.header{
    @apply flex items-center w-full h-[80px];
    background-color: #E3D9DB;
}
._menu, .__menu{
    cursor: pointer;
    width: 40px;
    height: 40px;
}
#icon1, #icon2{
    width: 40px;
    height: 40px;
}
._admin{
    @apply flex ml-[850px]
}
.rightAside{
    @apply h-full w-[40px] bg-gray-200
}
.funBtn1{
    @apply ml-[50px]
}
.funBtn2{
    @apply ml-[50px]
}
.categoryHref{
    cursor: pointer;
}
.topHeader{
    @apply w-full h-[15px]
}
.centerHeader{
    @apply bg-yellow-100 w-full h-[40px]
}
#top{
    margin-top: 300px;
}
.space{
    margin-top: 20px;
}
.bottom{
    @apply w-full h-[30px]
}
</style>
<script>
export default {
    components: { Sidebar }
}
</script>
<script setup>
import { ref } from '@vue/reactivity'
import axios from 'axios';
import { onMounted } from '@vue/runtime-core';
import router from '../router';
import Header from '../components/Header.vue'
import Sidebar from '../components/SideBar.vue';
import { defineProps } from 'vue';
import { useStore } from 'vuex';

// const sideWidth = ref('300px');
// const tableWidth = ref('220px');

// const widthChange = function (){
//     sideWidth.value = sideWidth.value === '300px' ? '132px' : '300px';
//     tableWidth.value = tableWidth.value === '300px' ? '220px' : '300px';
// };

const redirect = (catId) => {
    // console.log("/product/" + catId);
    router.push({ name: "product", params: { categoryId: catId} });
}

// const store = new useStore();
// const username = store.state.userInfo.username;
// const totalPrice = store.state.totalPrice;
// const shopCart = store.state.shopCart;
// var carts = new Array();
const viewCart = function (){
        window.location.href="http://localhost:3000/cart";
}

const editAccount = function(){
    window.location.href="http://localhost:3000/modify";
}

const quit = function(){
    localStorage.removeItem("token");
    router.push({ path: "/login" });
}

const viewData = function(){
    window.location.href="http://localhost:3000/visualzation";
}

const viewOrder = function(){
    axios({
        method : 'POST',
        url : "/order/"+sessionStorage.getItem("username")+"/viewOrder",
    }).then(Response => {
        var allOrder = new Array;
        for(var i = 0; i < Response.data.data.length; i++)
        {
          allOrder.push(Response.data.data[i]);
        }
        window.sessionStorage.setItem("allOrder", JSON.stringify(allOrder));
        window.location.href="http://localhost:3000/viewOrder";
        console.log("addOrder返回的内容为"+Response.data);
    })
}

const searchProducts = function(){
    window.location.href="http://localhost:3000/search";
}

const viewCategory = function () {
    router.push({path:"/category"})
}
const viewProduct = function () {
   router.push({path:"/allproduct"})
}
const viewItem = function () {
  router.push({path:"/allItem"})
}

const viewLog = function(){
     router.push({path:"/log"})
}

</script>